<template>
  <div class="box-com">
    <h2>标签管理</h2>
    <div class="tag-list">
      <el-button
        type="primary"
        plain
        icon="el-icon-plus"
        @click="handleAddTag"
      >添加标签</el-button>
      <el-table
        :data="tagList"
        max-height="400"
      >
        <el-table-column
          prop="name"
          label="名称"
        >
        </el-table-column>
        <el-table-column
          prop="createdAt"
          label="创建时间"
          :formatter="formatterDate"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          fixed="right"
          width="150px"
        >
          <template #default="scope">
            <el-button
              type="text"
              @click="handleEditTag(scope.row)"
            >编辑</el-button>
            <el-button
              type="text"
              @click="handleDeleteTag(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="box-pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          :total="total"
          :page-sizes="[1, 5, 10, 20]"
          :page-size="pageSize"
          layout="total, prev, pager, next, sizes,jumper"
        ></el-pagination>
      </div>
    </div>
    <!-- 新增标签 编辑标签面板 -->
    <right-panel
      v-model="panelVisible"
      :title="panelTitle"
      :size="330"
    >
      <edit-tag
        :type="editType"
        :data="editData"
        @submit="handleSubmitTag"
      />
    </right-panel>
  </div>
</template>
<script lang="ts">
import { computed, defineComponent, getCurrentInstance, onMounted, ref, watchEffect } from 'vue'
import { TagData, getTag, removeTagByID, addNewTag, updateTagByID } from '@/api/tag'
import EditTag from './components/editTag.vue'
import RightPanel from '@/components/RightPanel/index.vue'
import dayjs from 'dayjs'
export default defineComponent({
  name: 'Tag',
  components: {
    RightPanel,
    EditTag
  },
  setup() {
    const { proxy } = getCurrentInstance()!
    const pageNum = ref(1)
    const pageSize = ref(10)
    const total = ref(0)
    const panelVisible = ref(false)
    const tagList = ref<TagData[]>([])
    const editData = ref<TagData | undefined>(undefined)
    const editType = ref(1) // 0编辑 1新增
    const panelTitle = computed(() => editType.value === 1 ? '新增标签' : '编辑标签')
    const getTagList = () => {
      getTag({
        pageNum: pageNum.value,
        pageSize: pageSize.value
      }).then(res => {
        const { data } = res
        tagList.value = data?.tag
        total.value = data?.total
      })
    }
    onMounted(() => {
      // getTagList()
    })
    // 自动追踪相关依赖属性变动获取数据
    watchEffect(() => {
      getTagList()
    })
    // 格式化日期
    const formatterDate = (row: TagData) => {
      return dayjs(row.createdAt).format('YYYY-MM-DD HH:mm:ss')
    }
    // 分页
    const handleSizeChange = (val: number) => {
      pageSize.value = val
      getTagList()
    }
    const handleCurrentChange = (val: number) => {
      pageNum.value = val
      getTagList()
    }
    // 新增标签弹窗处理
    const handleAddTag = () => {
      editType.value = 1
      editData.value = {} as TagData
      panelVisible.value = true
    }
    // 编辑标签弹窗处理
    const handleEditTag = (row: TagData) => {
      editType.value = 0
      editData.value = { ...row }
      panelVisible.value = true
    }
    // 删除标签处理
    const handleDeleteTag = (row: TagData) => {
      proxy?.$confirm(`您确认要删除标签${row.name}吗？`, '删除确认', {
        type: 'warning'
      }).then(() => {
        removeTagByID(row.id).then(res => {
          proxy?.$message.success('标签删除成功')
          getTagList()
        }).catch(() => {
          proxy?.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      })
    }
    // 新增标签
    const addNewTagFun = (data:TagData) => {
      addNewTag(data).then(() => {
          proxy?.$message.success('标签添加成功')
          panelVisible.value = false
          getTagList()
      })
    }
    // 编辑标签
    const editTagFun = (data:TagData) => {
      updateTagByID(data.id, data).then(() => {
          proxy?.$message.success('标签编辑成功')
          panelVisible.value = false
          getTagList()
      })
    }
    // 提交新增标签信息
    const handleSubmitTag = (data:TagData) => {
      if (editType.value === 1) {
        addNewTagFun(data)// 新增
      } else if (editType.value === 0) {
        editTagFun(data)// 编辑
      }
    }
    return {
      pageNum,
      pageSize,
      total,
      handleSizeChange,
      handleCurrentChange,
      tagList,
      editType,
      panelTitle,
      panelVisible,
      editData,
      handleAddTag,
      handleEditTag,
      handleDeleteTag,
      addNewTagFun,
      editTagFun,
      handleSubmitTag,
      formatterDate
    }
  }
})
</script>

<style lang="scss" scoped>
</style>
